<form class="layui-form" action="">
         <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                </div>
           </div>
         <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="text" name="roleName" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
                </div>
           </div>
         <div class="layui-form-item">
                <label class="layui-form-label">归属部门</label>
                <div class="layui-input-block">
                    <input type="text" id="tree" lay-filter="tree" class="layui-input">
                </div>
           </div>
         <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="roleDoc" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
                </div>
           </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色权限</label>
        <div class="layui-input-block">
            <input type="text" name="quanxian" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(["jquery","form","treeSelect"],function () {
        var $=layui.jquery
        ,form=layui.form,
        treeSelect= layui.treeSelect;

        form.on('submit(demo1)', function(data){//点击提交按钮
           $.ajax({
               url:"/sysRole/addSysRole",
               data:data.field,
               dataType:"json",
               type:"post",
               success:function (msg) {
                   if (msg.code==0){
                        tableIns.reload({
                            page:{
                                curr:1
                            }
                        });
                        layer.msg(msg.msg);//提示后台传过来的信息
                        layer.close(openIndex);//关闭当前弹出的窗体
                   }else{
                       layer.msg(msg.msg);//提示后台传过来的信息
                   }
               }
           });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        /**
         * 选择部门模块，弹出的树桩菜单
         */
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '选择角色所属部门',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function(d){
                console.log("点击回调啊："+JSON.stringify(d.current.name));

            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log("加载完成后回调："+JSON.stringify(d) );
//                选中节点，根据id筛选
//                treeSelect.checkNode('tree', 3);

//                获取zTree对象，可以调用zTree方法
               var treeObj = treeSelect.zTree('tree');
               console.log(treeObj);

//                刷新树结构
//                treeSelect.refresh();
            }
        });


    });
</script>